<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
		<style type="text/css">
			html{ background-color: white; }
			header{ border-bottom: 1px solid #ccc; padding: 25px 0;  }
			span {
				padding: 10px 15px;
				margin: 10px;
				display: inline-block;
				background-color: #e8e8e8;
			}
            .hover{ opacity: .4; }
		</style>
	</head>
	<body>
		<header>
			<h1>主体</h1>
			<mark>
				使用前请详细阅读 文档 使用规则
			</mark>
		</header>
    	<article>尝试手势右滑或者 "手动打开侧滑" </article>
		<span tapmode="hover" onclick="fnOpenDrawerPane()">手动打开侧滑</span>
		<span tapmode="hover" onclick="fnClose()">关闭侧滑布局</span>
	</body>
</html>
<script type="text/javascript">
	function fnOpenDrawerPane() {
		api.openDrawerPane({
		    type: 'right'
		});
	}
	function fnClose(){
		api.closeWin({
			name: 'main'
		});
	}
</script>
